<template>
    <h3>商品对应列表筛选</h3>
    <div class="mt-4">
        <el-input v-model="query.search" placeholder="请输入关键词！" class="input-with-select">
            <template #prepend>
                <el-select clearable v-model="query.category" placeholder="筛选哦！" style="width: 115px">
                    <el-option v-for="item in categorys" :key="item" :label="item" :value="item" />
                </el-select>
            </template>
            <template #append>
                <el-button :icon="Search" @click="searchFn" />
            </template>
        </el-input>
    </div>
    <el-table :data="list" style="width: 100%" empty-text="暂无数据！！!">
        <el-table-column prop="proid" label="编号" width="180" />
        <el-table-column label="图片" width="180">
            <template #default="scope">
                <img class="img" :src="scope.row.img1" />
            </template>
        </el-table-column>
        <el-table-column prop="proname" label="名称" width="180" />
        <el-table-column prop="brand" label="品牌" width="180" />
        <el-table-column prop="originprice" label="价格" width="180" />
        <el-table-column prop="discount" label="折扣" width="180" />
        <el-table-column prop="sales" label="销量" width="180" />
        <el-table-column prop="stock" label="库存" width="180" />
        <el-table-column label="是否推荐">
            <template #default="scope">
                <el-switch v-model="scope.row.isrecommend" />
            </template>
        </el-table-column>
    </el-table>
</template>
<script setup lang="ts">
import { reactive } from "vue";
import service from "../../../utils/service";
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
const input3 = ref('')
const select = ref('')
// 一、分类
// 定义了分类的数据
const categorys = reactive<string[]>([])
// 获取分类
const getCategorys = () => {
    service({
        url: "/pro/getCategory",
    })
        .then(res => {
            if (res.data.code == "200") {
                categorys.length = 0;
                categorys.push(...res.data.data);
            }
        })
}

getCategorys();

// 定义查询条件
const query = reactive<{
    category?: string,
    search?: string
}>({
    category: "",
    search: ""
})


// 定义查询的结果（表格里的数据）

interface IGoods {
    brand: string,
    category: string,
    desc: string,
    discount: number,
    img1: string,
    isrecommend: number,
    issale: number,
    isseckill: number,
    originprice: number,
    proid: string,
    proname: string,
    sales: number,
    stock: number
}

const list = reactive<IGoods[]>([]);

const searchFn = () => {
    service({
        url: "/pro/searchPro",
        method: "post",
        data: `category=${query.category}&search=${query.search}`
    })
        .then(res => {
            if (res.data.code === "200") {
                list.length = 0;
                list.push(...res.data.data);
                console.log("list", list);
            }
        })
}

searchFn(); 
</script>
<style scoped>
.input-with-select .el-input-group__prepend {
    background-color: var(--el-fill-color-blank);
}

.img {
    width: 50%;
    height: 50%;
}
</style>